import React, { Component } from 'react'

export default class App extends Component {
    state = {
        name: '张三',
        note: '',
        str: '黄焖鸡',
        sex: '男',
        list: []
    }


    changeValue = (e) => {
        // console.log(111111, e.target.name, e.target.value);
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    changeList = (e) => {

        console.log(e.target.checked);

        const arr = [...this.state.list]

        if (e.target.checked) {
            // 被选中
            arr.push(e.target.value)
        } else {
            // 取消选中
            // 根据内容找到数据中的位置，将其删除掉
            const index = this.state.list.findIndex(item => e.target.value === item)
            // 根据 index 删除掉对应的内容
            arr.splice(index, 1)
        }

        this.setState({
            list: arr
        })

    }

    render() {
        return (
            <div>
                <h2>{this.state.name}</h2>
                <input type="text" name='name' value={this.state.name} onChange={this.changeValue} />

                <h2>{this.state.note}</h2>
                <textarea name="note" value={this.state.note} onChange={this.changeValue}></textarea>

                <br />

                <select name="str" value={this.state.str} onChange={this.changeValue} id="">
                    <option value="黄焖鸡">黄焖鸡</option>
                    <option value="地锅鸡">地锅鸡</option>
                    <option value="大盘鸡">大盘鸡</option>
                    <option value="口水鸡">口水鸡</option>
                    <option value="白斩鸡">白斩鸡</option>
                </select> -------- {this.state.str}

                <br />

                <input type="radio" checked={this.state.sex == '男'} name='sex' value={'男'} onChange={this.changeValue} /> 男
                <input type="radio" name='sex' value={'女'} onChange={this.changeValue} /> 女
                <input type="radio" name='sex' value={'自定义'} onChange={this.changeValue} /> 自定义
                -------- 你选择的是： {this.state.sex}

                <br />

                <input type="checkbox" name='list' value={'睡觉'} onChange={this.changeList} /> 睡觉
                <input type="checkbox" name='list' value={'洗漱'} onChange={this.changeList} /> 洗漱
                <input type="checkbox" name='list' value={'吃饭'} onChange={this.changeList} /> 吃饭
                <input type="checkbox" name='list' value={'上班'} onChange={this.changeList} /> 上班
                <input type="checkbox" name='list' value={'带薪摸鱼'} onChange={this.changeList} /> 带薪摸鱼
                <input type="checkbox" name='list' value={'下班干饭'} onChange={this.changeList} /> 下班干饭
                <input type="checkbox" name='list' value={'睡觉'} onChange={this.changeList} /> 睡觉
                <br />
                ------ 你今天要做的事情：{this.state.list}

            </div>
        )
    }
}
